<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="template">
<head>
<title>Task List</title>
</head>
<body>
	<!-- /* Content of this page will be decorated by the elements of layout.html (task/layout) */ -->
	<div layout:fragment="content">
		<div class="page-header">
			<h1>TASK LIST</h1>
		</div>
		<div class="row">
			<div class="col-md-4 col-xs-12">
				<div class="panel panel-default">
					<!-- Default panel contents -->
					<div class="panel-heading">
						<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
						TODO
					</div>
					<div class="panel-body">
						<p>Tasks newly added in the backlog.</p>
					</div>

					<!-- List group -->
					<div th:if="${not #lists.isEmpty(todotasks)}">
						<ul id="todotasks" class="list-group">

							<li class="list-group-item" th:each="task: ${todotasks}">
								<h4>
									<span th:text="${'#'+task.id+' '+task.name} "></span> <span
										class="pull-right"> <a
										th:href="@{/tasks/{id}(id=${task.id})}"> <span
											class="glyphicon glyphicon-file" aria-hidden="true"></span>
									</a> <a th:href="@{/tasks/{id}/edit(id=${task.id})}"> <span
											class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
									</a>
									</span>
								</h4>
								<p th:text="${task.description}"></p>
								<p>
								<form
									th:action="@{/tasks/{id}(id=${task.id}, action=MARK_DOING)}"
									method="post">
									<input type="hidden" name="_method" value="PUT"></input>
									<button type="submit" class="btn btn-sm btn-primary">
										<span class="glyphicon glyphicon-play" aria-hidden="true"></span>
										START
									</button>
								</form>
								</p>
							</li>
						</ul>
					</div>
				</div>
			</div>

			<div id="doingtasks" class="col-md-4 col-xs-12">
				<div class="panel panel-info">
					<!-- Default panel contents -->
					<div class="panel-heading">
						<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
						WORK IN PROGRESS
					</div>
					<div class="panel-body">
						<p>Tasks had been assigned and started.</p>
					</div>

					<!-- List group -->
					<div th:if="${ not #lists.isEmpty(doingtasks)}">
						<ul id="doingtasks" class="list-group">

							<li class="list-group-item" th:each="task: ${doingtasks}">
								<h4 th:text="'#'+${+task.id }+' '+${task.name}"></h4>
								<p th:text="${task.description}"></p>
								<p>
								<form th:action="@{/tasks/{id}(id=${task.id}, action=MARK_DONE)}"
									method="post">
									<input type="hidden" name="_method" value="PUT"></input>
									<button type="submit" class="btn btn-sm btn-success">
										<span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>
										DONE
									</button>
								</form>
								</p>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div id="donetasks" class="col-md-4 col-xs-12">
				<div class="panel panel-success">
					<!-- Default panel contents -->
					<div class="panel-heading">
						<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
						DONE
					</div>
					<div class="panel-body">
						<p>Tasks had been done successfully.</p>
					</div>

					<!-- List group -->
					<div th:if="${ not #lists.isEmpty(donetasks)}">
						<ul id="donetasks" class="list-group">
							<li class="list-group-item" th:each="task:${donetasks}">
								<h4 th:text="'#'+${task.id}+' '+${task.name}"></h4>
								<p th:text="${task.description}"></p>
								<p>
								<form th:action="@{/tasks/{id}(id=${task.id})}" method="post">
									<input type="hidden" name="_method" value="DELETE"></input>
									<button type="submit" class="btn btn-sm btn-danger">
										<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
										DELETE
									</button>
								</form>
								</p>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>